<template>
  <view class="contrastVue">
    <image
      :src="
        uploadVideoUrl +
        '?x-oss-process=video/snapshot,t_1,f_jpg,w_340,m_fast,ar_auto'
      "
      mode="widthFix"
      class="caseImg"
    ></image>
    <image
      class="quit absolute"
      src="../../static/close.png"
      @click="quit()"
      :style="{
        top: menuButtonTop + 'px',
        width: menuButtonHeight + 'px',
        height: menuButtonHeight + 'px',
      }"
    ></image>
    <view class="videoVue flex-between" v-if="height > 0">
      <view class="video relative element">
        <video
          :src="uploadVideoUrl"
          controls
          :show-fullscreen-btn="false"
          :style="{ height: height + 'rpx' }"
        ></video>
        <view class="name">原视频</view>
      </view>
      <view class="video relative">
        <video
          :src="videoUrl"
          :style="{ height: height + 'rpx' }"
          controls
          :show-fullscreen-btn="false"
        ></video>
        <view class="name">AI视频</view>
      </view>
    </view>

    <view class="botVue">
      <image
        src="https://ant-aiet.oss-cn-hangzhou.aliyuncs.com/assets/Frame%202523%402x.png"
        mode="widthFix"
      ></image>
    </view>
  </view>
</template>

<script>
export default {
  onShareAppMessage() {
    return {
      title: "坏香蕉数字人", // 分享的标题
      path: `/pages/mine/contrast?videoUrl=${encodeURIComponent(
        this.videoUrl 
      )}&uploadVideoUrl=${encodeURIComponent(this.uploadVideoUrl)}`,
      imageUrl:         "https://ant-aiet.oss-cn-hangzhou.aliyuncs.com/assets/Frame%202522%402x.png", // 分享的图片URL
      success(res) {
        console.log("分享成功", res);
      },
      fail(err) {
        console.error("分享失败", err);
      },
    };
  },
  onShareTimeline() {
    return {
      title: "坏香蕉数字人", // 分享的标题
      query: `videoUrl=${encodeURIComponent(
        this.videoUrl
      )}&uploadVideoUrl=${encodeURIComponent(this.uploadVideoUrl)}`, // 分享的路径参数
      imageUrl:
        "https://ant-aiet.oss-cn-hangzhou.aliyuncs.com/assets/Frame%202522%402x.png", // 分享的图片URL
      success(res) {
        console.log("分享成功", res);
      },
      fail(err) {
        console.error("分享失败", err);
      },
    };
  },
  data() {
    return {
      videoUrl: "",
      uploadVideoUrl: "",
      menuButtonTop: 0,
      menuButtonHeight: 0,
      isPlay1: false,
      isPlay2: false,
      videoContext1: null,
      videoContext2: null,
      height: 0,
    };
  },
  onLoad(option) {
    // this.videoUrl = option.videoUrl
    // this.uploadVideoUrl = option.uploadVideoUrl
    this.videoUrl = decodeURIComponent(option.videoUrl);
    this.uploadVideoUrl = decodeURIComponent(option.uploadVideoUrl);
    // console.log("当前参数",this.videoUrl);
    // console.log("当前参数",this.uploadVideoUrl);
    uni.showLoading();
    let _this = this;
    setTimeout(() => {
      uni
        .createSelectorQuery()
        .select(".caseImg")
        .boundingClientRect(function (rect) {
          console.log("元素高度：", rect.height);
          _this.height = _this.$utils.pxTorpx(rect.height);
          uni.hideLoading();
        })
        .exec();
    }, 1200);
  },
  mounted() {
    let _this = this;
    wx.getSystemInfo({
      success(res) {
        // 获取胶囊信息
        let menuButtonObject = wx.getMenuButtonBoundingClientRect();
        _this.menuButtonTop = menuButtonObject.top; //胶囊距离顶部距离
        _this.menuButtonHeight = menuButtonObject.height; //胶囊距离顶部距离
        console.log(_this.menuButtonTop, _this.menuButtonHeight);
      },
    });
  },
  methods: {
    quit() {
      this.videoUrl = "";
      this.uploadVideoUrl = "";
      // this.$tools.back()
      const pages = getCurrentPages();
      if (pages.length === 1) {
        // 当前页面是初始页面，无法返回
        console.log("当前页面是初始页面，无法返回");
        wx.switchTab({
          url: "/pages/index/index", // 跳转到首页或其他页面
          success: (res) => {
            console.log("跳转到首页成功");
          },
          fail: (err) => {
            console.error("跳转到首页失败", err);
          },
        });
      } else {
        // 可以返回上一级页面
        wx.navigateBack({
          delta: 1, // 返回上一级页面
          success: (res) => {
            console.log("返回上一级页面成功");
          },
          fail: (err) => {
            console.error("返回上一级页面失败", err);
          },
        });
      }
    },
    onended1() {
      console.log("1");
    },
  },
};
</script>

<style lang="less" scoped>
.quit {
  left: 30rpx;
  z-index: 999;
  background: #fff;
  border-radius: 50%;
}
.caseImg {
  width: 340rpx;
  position: fixed;
  left: -1000rpx;
}

.contrastVue {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  background: #f8c329;
  .botVue {
    width: 100%;
    height: 640rpx;
    position: absolute;
    left: 0;
    bottom: 0;
  }
  .videoVue {
    width: 690rpx;
    position: absolute;
    left: 30rpx;
    bottom: 640rpx;
    .video {
      width: 340rpx;
      min-height: 500rpx;
      text-align: center;
      image,
      video {
        width: 340rpx;
        border-radius: 12rpx 12rpx 0 0;
        box-sizing: border-box;
        line-height: 1;
        display: block;
      }
      .name {
        width: 100%;
        height: 88rpx;
        text-align: center;
        background: rgba(0, 0, 0, 0.2);
        line-height: 88rpx;
        color: #333;
        font-weight: 600;
        font-size: 32rpx;
        border-radius: 0 0 12rpx 12rpx;
        font-family: myfont;
      }
    }
  }
}
</style>
